<template>
  <div class="recommend" ref="recommend">
    <scroll ref="scroll" class="recommend-content" :data="discList">
      <div>
        <div class="slider-wrap">
          <slider v-if="sliderList.length > 0">
            <div v-for="item in sliderList">
              <a :href="item.linkUrl">
                <img :src="item.picUrl" class="needsclick">
              </a>
            </div>
          </slider>
        </div>
        <div class="disc-list">
          <h3 class="rec-title">热门歌单推荐</h3>
          <ul v-if="discList.length > 0">
            <li class="disc-item" v-for="item in discList" @click.stop="selectDisc(item)">
              <div class="left-logo">
                <img v-lazy="item.imgurl" width="60" height="60">
              </div>
              <div class="right-text">
                <h4 class="text-name" v-html="item.creator.name"></h4>
                <p class="text-desc" v-html="item.dissname"></p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </scroll>
    <div class="loading-container" v-show="!discList.length">
      <loading></loading>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
  import {getSliderData, getDiscList} from 'api/recommend';
  import {ERR_OK} from 'api/config';
  import Slider from '../base/slider/slider.vue';
  import Scroll from '../base/scroll/scroll.vue';
  import Loading from '../base/loading/loading.vue';
  import {playlistMixin} from 'common/js/mixin.js';
  import {mapMutations} from 'vuex';

  export default {
    mixins: [playlistMixin],
    components: {Slider, Scroll, Loading},
    data () {
      return {
        sliderList: [],
        discList: []
      };
    },
    created () {
      this._getSliderData();
      this._getDiscList();
    },
    methods: {
      selectDisc (item) {
//        console.log(item);
        this.setDisc(item);
        this.$router.push({
          path: `/recommend/${item.dissid}`
        });
      },
      _getSliderData () {
        getSliderData().then(res => {
          if (res.code === ERR_OK) {
            this.sliderList = res.data.slider;
          }
        }).catch(err => {
          console.log(err);
        });
      },
      _getDiscList () {
        getDiscList().then(res => {
          if (res.code === ERR_OK) {
            this.discList = res.data.list;
          }
        }).catch(e => {
          console.log(e);
        });
      },
      handlePlaylistAction (playlist) {
        const bottom = playlist.length > 0 ? '60px' : '';
        this.$refs.recommend.style.bottom = bottom;
        this.$refs.scroll.refresh();
      },
      ...mapMutations({
        'setDisc': 'SET_DISC'
      })
    }
  };
</script>

<style lang="less" scoped="">
  @import '~common/css/variable.less';

  .recommend {
    position: fixed;
    width: 100%;
    top: 88px;
    bottom: 0;
  }

  .recommend-content {
    height: 100%;
    overflow: scroll;
  }

  .slider-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .disc-list {
    .rec-title {
      padding: 15px;
      text-align: center;
      font-size: @font-size-large;
      color: @color-theme;
    }
    .disc-item {
      display: flex;
      padding: 10px 15px;
      .left-logo {
        flex: 0 0 60px;
      }
      .right-text {
        flex: 1;
        display: flex;
        padding-left: 20px;
        flex-direction: column;
        justify-content: center;
        line-height: 25px;
        overflow: hidden;
        .text-name {
          font-size: @font-size-medium;
        }
        .text-desc {
          line-height: 20px;
          font-size: @font-size-small-s;
          color: @color-text-d;
        }
      }
    }
  }

  .loading-container {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
  }
</style>
